<template>
  <view :class="theme" style="padding:  30rpx 0 var(--window-bottom);">
    <view class="ml-18 mr-18 relative">
      <uv-image width="100%" height="300" src="/static/img/teams/header.png" />
      <view class="absolute top-50 left-30 right-30 bottom-50 flex-row flex-wrap">
        <view class="w-50% justify-center items-center mb-30">
          <text class="text-36 fw-bold">{{ teamData.total_number || 0 }}</text>
          <text class="text-26 color-9">團隊</text>
        </view>
        <view class="w-50% justify-center items-center mb-30">
          <text class="text-36 fw-bold">{{ teamData.rec_num || 0 }}</text>
          <text class="text-26 color-9">直推人數</text>
        </view>
        <view class="w-50% justify-center items-center mb-30">
          <text class="text-36 fw-bold">{{ teamData.team_amount || 0 }}</text>
          <text class="text-26 color-9">業績</text>
        </view>
      </view>
    </view>

    <view v-if="teamData.inviter" class="bg-4 b-rounded-20 ml-30 mr-30 p-40">
      <text class="text-30 fw-bold">邀请人</text>
      <view class="mt-30 flex-row items-center">
        <uv-avatar size="80" :src="teamData.inviter.avatar" />
        <view class="ml-24">
          <text class="text-30 fw-bold">{{ teamData.inviter.nickname || "-" }}</text>
          <text class="mt-12 color-9">{{ teamData.inviter.user_sn || "-" }}</text>
        </view>
      </view>
    </view>

    <view class="m-60 items-center">
      <uv-image width="216" height="34" src="/static/img/teams/title.png" />
    </view>

    <view class="ml-30 mr-30">
      <input v-model="users.search" @confirm="search" :placeholder="`\ue67e 搜索查看`" confirm-type="search"
        class="bg-4 h-70 mb-30 text-center color-2 b-rounded-36 text-26 fw-500" type="text"
        placeholder-class="iconfont color-9 fw-400">
      <view v-for="(user, index) in users.list" :index="index" class="mb-30 bg-4 b-rounded-20 p-40 flex-row">
        <uv-avatar size="80" :src="user.avatar" />
        <view class="ml-20">
          <text class="text-30">{{ user.nickname || "-" }}</text>
          <text class="mt-24 text-22">{{ user.mobile || "-" }}</text>
          <text class="mt-30 color-9">團隊：{{ user.total_number || 0 }}</text>
          <label class="mt-24 color-9">
            <text>業績：{{ user.team_amount || 0 }}</text>
            <text class="ml-90">個人業績：{{ user.personal_amount || 0 }}</text>
          </label>
        </view>
      </view>

      <view class="m-30 items-center z-9">
        <uv-image v-if="!users.list.length" :showLoading="false" width="396" height="256" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <uv-load-more :status="users.cache.status" :is-dot="!!users.list.length" icon-color="#999" color="#999" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const teamData = ref({} as AnyObject);
const users = reactive({
  list: [] as any[],
  page: 0,
  limit: 20,
  search: "",
  cache: {
    page: 1,
    list: [] as any[],
    status: "loadmore"
  },
  next: false,
});

onLoad(() => {
  uni.request({
    url: "/teamData",
    success({ data }: any) {
      teamData.value = data || {};
    }
  });
  search();
});

onReachBottom(() => getUsers());

const search = () => {
  users.page = 0;
  users.next = false;
  users.cache = {
    page: 1,
    list: [] as any[],
    status: "loadmore"
  };
  getUsers();
}

const getUsers = () => {
  pager({ url: "/directList", data: { keyword: users.search } }, users);
}

</script>

<style lang="scss" scoped>
// scss
</style>